import React, {useRef, useState} from 'react';
import ProTable from "@ant-design/pro-table";
import {Button, Space, Tag, Popconfirm, message} from "antd";
import {PageContainer} from "@ant-design/pro-layout";
import { getReport } from '@/services/report'
import {delAdver} from "@/services/adver";
import AdoptOrReject from "@/pages/Report/components/AdoptOrReject";

const Index = () => {
  const ref = useRef()
  //定义显不显示模态框reject
  const [isModalVisible,setIsModalVisible] = useState(false)
  const [isRejectModalVisible,setIsRejectModalVisible] = useState(false)
  //定义修改的id
  const [editId,setEditId] = useState(undefined)

  //定义单条举报的状态
  const status = [
    <Tag color="blue" key={1}>未审核</Tag>,
    <Tag color="red" key={2}>申请驳回</Tag>,
    <Tag color="green" key={3}>沉帖</Tag>,
    <Tag color="green" key={4}>删帖</Tag>,
  ]


  //定义单条举报的类型
  const model_type = [
    <Tag color="blue" key={1}>文章</Tag>,
    <Tag color="red" key={2}>问答</Tag>,
  ]

  const columns = [
    {
      title:'举报类型',
      dataIndex:'model_type',
      render: (_, record) => (
        <Space>
          {
            model_type[record.model_type]
          }
        </Space>
      ),
    },
    {
      title:'举报理由',
      dataIndex:'content',
      ellipsis: true,
    },
    {
      title:'举报人',
      dataIndex:'username',
    },
    {
      title:'审核状态',
      dataIndex:'status',
      render: (_, record) => (
        <Space>
          {
            status[record.status]
          }
        </Space>
      ),
    },
    {
      title:'驳回理由',
      dataIndex:'reject',
    },
    {
      title:'修改状态',
      render:(_,record) => {
        if (record.status == 0){
          return <div>
            <Button
              type="primary"
              shape="round"
              onClick={() => {
                showModal(true)
                setEditId(record.id)
              }}
            >
              通过
            </Button>
            &nbsp;&nbsp;
            <Button
              type="primary"
              shape="round"
              danger
              onClick={() => {
                showRejectModal(true, record.id)
                setEditId(record.id)
              }}
            >
              驳回
            </Button>
            &nbsp;&nbsp;
          </div>

        }else{
          return <div>
            <Button
              type="primary"
              shape="round"
              disabled
              onClick={() => {
                showModal(true)
                setEditId(record.id)
              }}
            >
              通过
            </Button>
            &nbsp;&nbsp;
            <Button
              type="primary"
              shape="round"
              disabled
              danger
              onClick={() => {
                showModal(true, record.id)
                setEditId(record.is)
              }}
            >
              驳回
            </Button>
            &nbsp;&nbsp;
          </div>
        }
      },
    },
  ];


  const showModal = (show) => {
    setIsModalVisible(show)
  }
  const showRejectModal = (show) => {
    setIsRejectModalVisible(show)
  }

  const getReportData = async () => {
    const res = await getReport()
    console.log(res);

    res.data.map(item=>{
      return item.username = item.user.data.nickname
    })
    return{
      data:res.data,
    }
  }

  return (
    <PageContainer>
      <ProTable
        actionRef={ref}
        columns={columns}
        rowKey="id"
        search={{
          labelWidth: 'auto',
          collapseRender: false,
        }}
        request={async (params = {}) => getReportData(params)}
        dateFormatter="string"
        headerTitle="高级表格"
      />

      <AdoptOrReject
        showModal={showModal}
        visible={isModalVisible}
        RejectVisible={isRejectModalVisible}
        showRejectModal={showRejectModal}
        refs={ref}
        id={editId}
      />

    </PageContainer>
  );
};

export default Index;
